<template>
	<view class="order_deta">
		<uv-navbar placeholder autoBack bgColor="#f5f5f5">
			<template v-slot:left>
				<view class="left_slot">
					<image src="@/static/images/back2.png"></image>
				</view>
			</template>
		</uv-navbar>
		<PaymentState :data_info="data_info" :type="status" @data_end="getDeta" @goPay="goPay" />

		<view class="goods_info">
			<view class="info_box" v-for="item in list">
				<image :src="item.product_img"></image>
				<view class="info_view">
					<view class="name">{{item.product_name}}</view>
					<view class="total">数量：{{item.number}}</view>
					<view class="price">
						<view class="unit">￥</view>
						<view class="value">{{data_info.total}}</view>
					</view>
				</view>
			</view>
			<!-- <view class="service">
				<image src="@/static/images/m21.png"></image>
				<text>联系客服</text>
			</view> -->
		</view>
		<view class="list">
			<view class="item">
				<view class="key">订单编号：</view>
				<view class="value">{{data_info.order_no}}</view>
				<view class="btn" @click="copy(data_info.order_no)">复制</view>
			</view>
			<view class="item">
				<view class="key">下单时间：</view>
				<view class="value">{{data_info.created_at}}</view>
			</view>
			<view class="item" v-if="data_info.pay_mode_name">
				<view class="key">支付方式：</view>
				<view class="value">{{data_info.pay_mode_name}}</view>
			</view>
			<!-- <view class="item">
				<view class="key">配送方式：</view>
				<view class="value">普通快递</view>
			</view> -->
			<view class="cell">
				<view class="key">商品总额</view>
				<view class="value">￥{{data_info.total_price}}</view>
			</view>
			<view class="cell">
				<view class="key">运费</view>
				<view class="value" v-if="data_info.freight">+ ￥{{data_info.freight}}</view>
				<view class="value" v-else>包邮</view>
			</view>
			<view class="cell">
				<view class="key">积分</view>
				<view class="value">+ {{data_info.integral}}</view>
			</view>
			<!-- 	<view class="cell">
				<view class="key">优惠券</view>
				<view class="value">-￥50</view>
			</view> -->
			<view class="total">
				<view class="key">需付款：</view>
				<view class="price">
					<view class="unit">￥</view>
					<view class="value">{{data_info.total}}</view>
				</view>
			</view>
		</view>
		<!-- v-if="status!=0" -->
		<view class="footer">
			<!-- <view class="item">再次购买</view>
			<view class="item" @click="router('/pages/my/cancel_success')">修改订单</view>
			<view class="item" @click="Cancel">申请退款</view>
			<view class="item">联系客服</view> -->
			<view class="item" @click="cancel" v-if="status==0">取消订单</view>
			<view class="item red" v-if="status==2" @click="confirm_order">确认收货</view>
		</view>
		<uv-popup ref="popup" mode="bottom" round="10">
			<CancelOrder :id="id" @close="reLoad" />
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		orderInfo,
		orderPayment,
		orderCancel,
		orderComplete
	} from "@/request/api";
	import PaymentState from "@/components/my/PaymentState.vue";
	import CancelOrder from "@/components/my/CancelOrder.vue";
	import useWechat from "@/hooks/useWechat.js";
	import useBase from "@/hooks/useBase.js";
	const {
		wxPay
	} = useWechat();
	const {
		router,
		copy
	} = useBase();
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref,
		shallowRef
	} from "vue";

	const popup = shallowRef();
	const cancel = () => popup.value.open();
	const status = ref(""),
		list = ref([]);
	const data_info = ref({
		order_no: "",
		created_at: "",
		pay_mode_name: "",
		freight: 0.00,
		total: "",
		total_price: 0.00
	});

	let id = ref("");
	const getDeta = async () => {
		let {
			order
		} = await orderInfo({
			id: id.value
		});
		status.value = order.status;
		list.value = order.product;
		data_info.value = order;
		data_info.value.total_price = Number(order.total) - Number(order.freight);
	};
	const goPay = async () => {
		let {
			pay_data
		} = await orderPayment({
			id: id.value
		});
		wxPay(pay_data, () => {
			uni.$uv.toast("操作成功");
			getDeta();
		});
	};
	const reLoad = () => {
		popup.value.close();
		getDeta();
	};
	const confirm_order = async () => {
		await orderComplete({
			id: id.value
		});
		uni.$uv.toast("操作成功");
	};
	onLoad(options => {
		id.value = options.id;
		getDeta();
	});
</script>

<style scoped lang="scss">
	.order_deta {
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
		padding: 0 20rpx 120rpx;
		box-sizing: border-box;
		background: #f5f5f5;

		.left_slot {
			image {
				width: 43rpx;
				height: 36rpx;
			}
		}

		.goods_info {
			border-radius: 24rpx;
			margin-bottom: 20rpx;
			background: #FFFFFF;

			.info_box {
				padding: 38rpx 46rpx 30rpx 25rpx;
				box-sizing: border-box;
				display: flex;

				image {
					width: 168rpx;
					height: 168rpx;
					border-radius: 14rpx;
					background: #666666;
				}

				.info_view {
					flex: 1;
					padding-top: 8rpx;
					padding-left: 20rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						line-height: 36rpx;
						color: #333333;
						font-size: 28rpx;
						font-weight: bold;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.total {
						color: #999999;
						font-size: 24rpx;
					}

					.price {
						display: flex;
						align-items: center;

						.unit {
							color: #272727;
							font-size: 22rpx;
							font-weight: bold;
						}

						.value {
							color: #272727;
							font-size: 32rpx;
							font-weight: bold;
						}
					}
				}
			}

			.service {
				height: 80rpx;
				border-top: 1px solid #F6F6F6;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 26rpx;
					height: 26rpx;
				}

				text {
					color: #272727;
					font-size: 28rpx;
					font-weight: bold;
					padding-left: 18rpx;
					box-sizing: border-box;
				}
			}
		}

		.list {
			border-radius: 24rpx;
			padding: 23rpx 0 50rpx;
			box-sizing: border-box;
			background: #FFFFFF;

			.item {
				height: 68rpx;
				border-bottom: 1px solid #F6F6F6;
				padding-left: 24rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;

				.key {
					color: #7C7C7C;
					font-size: 24rpx;
					font-weight: bold;
				}

				.value {
					color: #272727;
					font-size: 24rpx;
					font-weight: bold;
				}

				.btn {
					width: 70rpx;
					height: 36rpx;
					line-height: 36rpx;
					text-align: center;
					color: #333333;
					font-size: 22rpx;
					font-weight: bold;
					border-radius: 18rpx;
					margin-left: 12rpx;
					background: #F2F2F2;
				}
			}

			.cell {
				height: 68rpx;
				padding-left: 24rpx;
				padding-right: 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.key {
					color: #7C7C7C;
					font-size: 24rpx;
					font-weight: bold;
				}

				.value {
					color: #272727;
					font-size: 24rpx;
					font-weight: bold;
				}
			}

			.total {
				padding-top: 22rpx;
				padding-right: 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.key {
					color: #272727;
					font-size: 26rpx;
				}

				.price {
					display: flex;
					align-items: center;

					.unit {
						color: #CA1C1D;
						font-size: 24rpx;
						font-weight: bold;
					}

					.value {
						color: #CA1C1D;
						font-size: 36rpx;
						font-weight: bold;
					}
				}
			}
		}

		.footer {
			width: 100%;
			height: 100rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 9;

			.item {
				width: 156rpx;
				height: 62rpx;
				color: #222222;
				font-size: 26rpx;
				font-weight: 500;
				border-radius: 30rpx;
				border: 1px solid #9A9A9A;
				margin-left: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				&:first-child {
					margin-left: 0;
				}

				&.red {
					color: #FFFFFF;
					border: none;
					background: #CA1C1D;
				}
			}
		}
	}
</style>